<!DOCTYPE html>
<html>
<head>
    <title>键盘修饰符演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .keyboard-demo {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .input-group {
            margin: 10px 0;
        }
        .input-group label {
            display: inline-block;
            width: 150px;
            font-weight: bold;
        }
        .input-group input {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 14px;
        }
        .key-log {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 3px;
            max-height: 200px;
            overflow-y: auto;
        }
        .key-item {
            padding: 2px 0;
            font-family: monospace;
            font-size: 12px;
        }
        .shortcut-demo {
            margin: 15px 0;
            padding: 15px;
            background: #e3f2fd;
            border-radius: 5px;
        }
        .shortcut-item {
            margin: 5px 0;
            padding: 5px;
            background: white;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>键盘修饰符演示</h2>
        
        <!-- 基础键盘修饰符 -->
        <div class="keyboard-demo">
            <h3>基础键盘修饰符</h3>
            
            <div class="input-group">
                <label>回车键(.enter)：</label>
                <input v-model="inputs.enter" 
                       @keyup.enter="handleKey('Enter键被按下', $event)"
                       placeholder="按回车键触发事件">
            </div>
            
            <div class="input-group">
                <label>Tab键(.tab)：</label>
                <input v-model="inputs.tab" 
                       @keydown.tab="handleKey('Tab键被按下', $event)"
                       placeholder="按Tab键触发事件">
            </div>
            
            <div class="input-group">
                <label>删除键(.delete)：</label>
                <input v-model="inputs.delete" 
                       @keyup.delete="handleKey('Delete/Backspace键被按下', $event)"
                       placeholder="按Delete或Backspace键">
            </div>
            
            <div class="input-group">
                <label>Esc键(.esc)：</label>
                <input v-model="inputs.esc" 
                       @keyup.esc="handleKey('Esc键被按下', $event)"
                       placeholder="按Esc键触发事件">
            </div>
            
            <div class="input-group">
                <label>空格键(.space)：</label>
                <input v-model="inputs.space" 
                       @keyup.space="handleKey('空格键被按下', $event)"
                       placeholder="按空格键触发事件">
            </div>
            
            <div class="input-group">
                <label>方向键：</label>
                <input v-model="inputs.arrow" 
                       @keyup.up="handleKey('上箭头', $event)"
                       @keyup.down="handleKey('下箭头', $event)"
                       @keyup.left="handleKey('左箭头', $event)"
                       @keyup.right="handleKey('右箭头', $event)"
                       placeholder="按方向键">
            </div>
        </div>
        
        <!-- 系统修饰符组合 -->
        <div class="keyboard-demo">
            <h3>系统修饰符组合</h3>
            
            <div class="input-group">
                <label>Ctrl+Enter：</label>
                <input v-model="inputs.ctrlEnter" 
                       @keyup.ctrl.enter="handleKey('Ctrl+Enter组合键', $event)"
                       placeholder="按Ctrl+Enter">
            </div>
            
            <div class="input-group">
                <label>Alt+S：</label>
                <input v-model="inputs.altS" 
                       @keyup.alt.83="handleKey('Alt+S组合键', $event)"
                       placeholder="按Alt+S">
            </div>
            
            <div class="input-group">
                <label>Shift+Tab：</label>
                <input v-model="inputs.shiftTab" 
                       @keydown.shift.tab="handleKey('Shift+Tab组合键', $event)"
                       placeholder="按Shift+Tab">
            </div>
            
            <div class="input-group">
                <label>精确匹配(.exact)：</label>
                <input v-model="inputs.exact" 
                       @keyup.ctrl.exact="handleKey('只按Ctrl（精确匹配）', $event)"
                       placeholder="只按Ctrl键，不能组合其他键">
            </div>
        </div>
        
        <!-- 快捷键功能演示 -->
        <div class="shortcut-demo">
            <h3>快捷键功能演示</h3>
            <p>在下面的文本区域中尝试以下快捷键：</p>
            <div class="shortcut-item">Ctrl+S：保存文档</div>
            <div class="shortcut-item">Ctrl+Z：撤销操作</div>
            <div class="shortcut-item">Ctrl+Y：重做操作</div>
            <div class="shortcut-item">Ctrl+A：全选文本</div>
            <div class="shortcut-item">Esc：清空文本</div>
            
            <textarea v-model="document.content"
                      @keydown.ctrl.83.prevent="saveDocument"
                      @keydown.ctrl.90.prevent="undoAction"
                      @keydown.ctrl.89.prevent="redoAction"
                      @keydown.ctrl.65.prevent="selectAll"
                      @keydown.esc="clearDocument"
                      style="width: 100%; height: 150px; margin: 10px 0; padding: 10px;"
                      placeholder="在这里输入文本，然后尝试快捷键..."></textarea>
            
            <div>
                <strong>文档状态：</strong>
                <span>字符数：{{ document.content.length }}</span> |
                <span>保存次数：{{ document.saveCount }}</span> |
                <span>撤销次数：{{ document.undoCount }}</span> |
                <span>重做次数：{{ document.redoCount }}</span>
            </div>
        </div>
        
        <!-- 按键日志 -->
        <div class="key-log">
            <h4>按键日志：</h4>
            <div v-for="log in keyLogs" :key="log.id" class="key-item">
                {{ log.timestamp }} - {{ log.message }} (keyCode: {{ log.keyCode }})
            </div>
            <button @click="clearKeyLogs">清空日志</button>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive } = Vue;
        
        createApp({
            setup() {
                const inputs = reactive({
                    enter: '',
                    tab: '',
                    delete: '',
                    esc: '',
                    space: '',
                    arrow: '',
                    ctrlEnter: '',
                    altS: '',
                    shiftTab: '',
                    exact: ''
                });
                
                const document = reactive({
                    content: '',
                    saveCount: 0,
                    undoCount: 0,
                    redoCount: 0,
                    history: []
                });
                
                const keyLogs = ref([]);
                let logId = 1;
                
                const handleKey = (message, event) => {
                    keyLogs.value.unshift({
                        id: logId++,
                        timestamp: new Date().toLocaleTimeString(),
                        message: message,
                        keyCode: event.keyCode || event.which
                    });
                    
                    if (keyLogs.value.length > 20) {
                        keyLogs.value.pop();
                    }
                };
                
                const saveDocument = () => {
                    document.saveCount++;
                    handleKey('文档已保存', { keyCode: 83 });
                    
                    // 模拟保存到历史记录
                    document.history.push({
                        content: document.content,
                        timestamp: new Date().toLocaleTimeString()
                    });
                    
                    if (document.history.length > 10) {
                        document.history.shift();
                    }
                };
                
                const undoAction = () => {
                    if (document.history.length > 0) {
                        const lastState = document.history.pop();
                        document.content = lastState.content;
                        document.undoCount++;
                        handleKey('撤销操作', { keyCode: 90 });
                    } else {
                        handleKey('没有可撤销的操作', { keyCode: 90 });
                    }
                };
                
                const redoAction = () => {
                    document.redoCount++;
                    handleKey('重做操作（演示）', { keyCode: 89 });
                };
                
                const selectAll = () => {
                    handleKey('全选文本', { keyCode: 65 });
                    // 注意：实际的全选需要操作DOM
                };
                
                const clearDocument = () => {
                    document.content = '';
                    handleKey('文档已清空', { keyCode: 27 });
                };
                
                const clearKeyLogs = () => {
                    keyLogs.value = [];
                };
                
                return {
                    inputs,
                    document,
                    keyLogs,
                    handleKey,
                    saveDocument,
                    undoAction,
                    redoAction,
                    selectAll,
                    clearDocument,
                    clearKeyLogs
                };
            }
        }).mount('#app');
    </script>
</body>
</html>
